<template>
  <div class="lee-changyan animated" :class="{ fadeInDown: show === true, fadeOutUp: show === false }">
    <div class="lee-changyan-close" @click="close">收起</div>
    <div class="lee-changyan-box">
      <div id="SOHUCS" :sid="sid"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeeChangYan',
  props: {
    sid: String,
    appid: String,
  },
  data() {
    return {
      show: '',
    };
  },
  methods: {
    init() {
      const appid = this.appid;
      const conf = 'prod_c4a889445407732c5d0461074d106a06';
      this.loadJs('https://changyan.sohu.com/upload/changyan.js', {}, () => {
        window.changyan.api.config({ appid, conf });
      });
    },

    loadJs(url, params = {}, success, id) {
      const script = document.createElement('script');
      script.src = [ url, Object.entries(params).map(item => {
        return `${item[0]}=${item[1]}`;
      }).join('&') ].filter(v => v).join('?');
      if (typeof id === 'string') script.setAttribute('id', id);
      if (typeof success === 'function') script.addEventListener('load', success);
      document.head.appendChild(script);
    },

    open() {
      this.show = true;
    },

    close() {
      this.show = false;
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less" scoped>
@media screen and (max-width: 750px) {
  .lee-changyan {
    margin: 20px;
    position: relative;
    box-sizing: border-box;
    animation-fill-mode: none !important;

    &-close {
      display: none;
    }

  }
}

@media screen and (min-width: 750px) {
  .lee-changyan {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    padding-top: 70px;
    box-sizing: border-box;
    z-index: 1000;
    background-color: rgba(255, 255, 255, .8);
    visibility: hidden;

    &-box {
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 20px 20px;
    }

    &-close {
      top: 4%;
      right: 4%;
      position: absolute;
      padding: 8px 16px;
      background-color: rgba(255, 255, 255, .95);
      border-radius: 4px;
      cursor: pointer;
    }

    &.fadeInDown, &.fadeOutUp {
      visibility: visible;
    }
  }
}
</style>
